<template>
  <div id="user">
    <div class="pageHead" v-if="isEdit == false">
      <h3 style="width: 30%; display: inline-block">用户查看</h3>
      <div class="pull-right editBtnContent">
        <el-button type="primary" round size="medium" @click="cancelSave">返回</el-button>
        <el-button type="primary" round size="medium" @click="isEdit = true"><i
            class="iconfont">&#xe606;</i>&nbsp;&nbsp;修改</el-button>
      </div>
    </div>
    <div class="pageMain" :style="{ height: isEdit == false ? 'calc(100% - 130px) !important' : '' }">
      <el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="userForm"
        :disabled="isEdit ? false : true">
        <div class="formHead">用户信息</div>
        <el-row>
          <el-form-item label="工号" prop="userCode">
            <el-input v-model="userForm.userCode" placeholder="工号"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model.trim="userForm.phone" :disabled="userForm.isAgentUser || userForm.isAdmin" autocomplete="off"
              placeholder="手机号码"></el-input>
            <span class="blueColor" style="font-size: 12px">（可用于登录）</span>
          </el-form-item>
          <el-form-item label="登录密码" v-if="isEdit == true && thisPageType == 'isChangeJump'">
            <el-input v-model.trim="userForm.pwd" type="password" autocomplete="off" placeholder="登录密码"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" v-if="isEdit == true && thisPageType == 'isAddJump'" prop="pwd">
            <el-input v-model.trim="userForm.pwd" type="password" autocomplete="off" placeholder="登录密码"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="用户名" prop="userName">
            <el-input v-model.trim="userForm.userName" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model.trim="userForm.realName" :disabled="userForm.isAgentUser" placeholder="真实姓名"></el-input>
          </el-form-item>
          <el-form-item label="职位" prop="position">
            <el-input v-model="userForm.position" placeholder="职位"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="所属部门" prop="departmentid">
            <el-cascader v-model="userForm.departmentid" :options="depTreeDataNew" :props="defaultProps"
              placeholder="所属部门"></el-cascader>
            <!-- <el-select v-model="userForm.departmentid" placeholder="所属部门" filterable>
              <el-option v-for="(item, i) in depTreeData" :key="i" :label="item.departmentName" :value="item.departmentid"></el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="所属角色" prop="roleid">
            <el-select v-model="userForm.roleid" placeholder="所属角色" clearable :disabled="userForm.isAgentUser || userForm.isAdmin" filterable>
              <el-option v-for="item in roleList" :key="item.roleid" :label="item.roleName"
                :value="item.roleid"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="部门负责人" prop="isPerson">
            <el-radio-group v-model="userForm.isPerson">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item> -->
        </el-row>
        <el-row>
          <el-form-item label="状态" prop="positionStatus">
            <el-radio-group v-model="userForm.positionStatus" :disabled="userForm.isAgentUser || userForm.isAdmin">
              <el-radio :label="1">在职</el-radio>
              <el-radio :label="2">离职</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="userForm.gender">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea" v-model="userForm.remarks" style="width: 444px"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="pageFooter" v-if="isEdit">
      <el-button size="medium" round @click="cancelSave">取 消</el-button>
      <el-button size="medium" type="primary" round :loading="isConfirmLoading" style="margin-left: 30px"
        @click="saveStaffInfo">保 存</el-button>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
import * as Vrules from "@/util/validate";
import { mapState } from "vuex";
import { mixinsMethod } from "@/util/util";
export default {
  name: "user",
  props: {
    thisPageType: {
      type: String,
      required: true,
    },
    departmentid: {
      required: false,
    },
    subid: {
      required: false,
    },
    id: {
      required: false,
    },
    roleid: {
      default: "",
    },
  },
  data() {
    return {
      defaultProps: {
        label: "name",
        value: "id",
        children: "childrens",
        checkStrictly: true,
        emitPath: false
      },
      userForm: {
        userName: "",
        pwd: "",
        realName: "",
        phone: "",
        userCode: "",
        departmentid: "",
        roleid: "",
        positionStatus: 1,
        gender: 0,
        remarks: "",
        // isPerson: false,
        position: "",
      },
      depTreeData: [],
      depTreeDataNew: [],
      roleList: [],
      isConfirmLoading: false,
      isEdit: true,
      rules: {
        userCode: [{ required: true, message: "请输入工号", trigger: "blur" }],
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { validator: Vrules.isCheckData, trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: Vrules.isPhone, trigger: "change" },
        ],
        realName: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
        departmentid: [{ required: true, message: "请选择所属部门", trigger: "change" }],
        roleid: [{ required: false, message: "请选择角色", trigger: "change" }],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapState({
      tagCurrent: (state) => state.tag.tagCurrent,
      userInfo: (state) => state.common.userInfo,
    }),
  },
  methods: {
    GetDepartmentListNew() {
      console.log(this.subid, 'this.subid');
      this.$api.systemManagement.GetPartDeptInfo({ subId: this.subid }).then(res => {
        console.log(res);
        this.depTreeDataNew = res.data.data;
      });
    },
    cancelSave() {
      this.$store.commit("DEL_TAG", this.tagCurrent);
      if (this.thisPageType === "isAddJump" && this.roleid) {
        this.$router.back();
        return;
      }
      this.$router.replace({ name: "organizationChart", query: { ischange: false } });
      // this.$router.back()
      // this.isEdit = false
    },

    saveStaffInfo() {
      let pageType = this.thisPageType;
      let params = JSON.parse(JSON.stringify(this.userForm));
      if (Array.isArray(params.departmentid)) {
        params.departmentid = params.departmentid[0];
      }
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          if (params.pwd) {
            params.pwd = md5(this.userForm.pwd);
          } else {
            delete params.pwd;
          }
          if (pageType === "isChangeJump") {
            this.isConfirmLoading = true;
            this.$api.systemManagement.UserEdit(params, 2).then((res) => {
              if (res.data.status === 200) {
                this.$notify({ title: "成功", message: "修改职员信息成功", type: "success", duration: 1500 });
                // this.isEdit = false
                this.$store.commit("DEL_TAG", this.tagCurrent);
                this.$router.replace({ name: "organizationChart", query: { ischange: true } });
              }
              this.isConfirmLoading = false;
            }).catch(() => {
              this.isConfirmLoading = false;
            });
          } else if (pageType === "isAddJump") {
            this.isConfirmLoading = true;
            this.$api.systemManagement.UserEdit(params, 1).then((res) => {
              if (res.data.status === 200) {
                this.$notify({ title: "成功", message: "添加职员信息成功", type: "success", duration: 1500 });
                this.$store.commit("DEL_TAG", this.tagCurrent);
                this.$router.replace({ name: "organizationChart", query: { ischange: true } });
              }
              this.isConfirmLoading = false;
            }).catch(() => {
              this.isConfirmLoading = false;
            });
          }
        }
      });
    },

    getParams(type) {
      if (this.thisPageType == "isChangeJump") {
        this.$api.systemManagement.GetUserInfo({ id: this.id }).then((res) => {
          let resData = res.data.data;
          this.userForm = resData;
          let obj = this.roleList.find((item) => {
            return item.roleid == this.userForm.roleid;
          });
          if (this.userForm.roleid == "00000000-0000-0000-0000-000000000000" || !obj) {
            this.userForm.roleid = "";
          }
          this.userForm.pwd = "";
          if (type) {
            this.getTreeData();
          }
        });
        // this.isEdit = false
      } else if (this.thisPageType == "isAddJump") {
        // this.$nextTick(() => {
        this.userForm = {
          userName: "",
          pwd: "",
          realName: "",
          phone: "",
          userCode: "",
          departmentid: "",
          roleid: "",
          positionStatus: 1,
          gender: 0,
          remarks: "",
          // isPerson: false,
          position: "",
          subid: this.subid,
        };
        // this.$refs.userForm.resetFields()
        // })
        // this.isEdit = true
        if (type) {
          this.getTreeData();
        }
      }
    },

    getTreeData() {
      if (this.depTreeData.length != 0) {
        this.setDepartmentid();
        this.setRoleid();
        return;
      }
      this.$api.systemManagement.GetDepartmentList({ subid: this.subid }).then((res) => {
        let resData = res.data.data;
        resData = resData.filter((m) => m.subid == this.userForm.subid);
        this.depTreeData = resData;
        this.setDepartmentid();
        this.setRoleid();
      });
    },
    setDepartmentid() {
      if (this.thisPageType == "isAddJump") {
        if (this.departmentid) {
          this.userForm.departmentid = this.departmentid;
        } else {
          this.userForm.departmentid = this.depTreeData[0].departmentid;
        }
      }
    },
    setRoleid() {
      if (this.thisPageType == "isAddJump") {
        this.userForm.roleid = this.roleid || "";
      }
    },
    getRoleList() {
      if (this.roleList.length == 0) {
        this.$api.systemManagement.GetRoleList().then((res) => {
          this.roleList = res.data.data;
          this.getParams(true);
        });
      } else {
        this.getParams(true);
      }
    },
  },
  mounted() {
    this.$nextTick(()=>{
      this.GetDepartmentListNew();
    });
  },
  activated() { },
  mixins: [mixinsMethod],
};
</script>

<style lang="less">
#user {
  padding: 0;

  .pageHead {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #edecf6;
    padding: 0 25px;

    .editBtnContent {
      height: 100%;
      line-height: 60px;

      .iconfont {
        font-size: 12px;
      }
    }
  }

  .pageMain {
    height: calc(100% - 60px) !important;

    .userForm {
      padding: 20px;
      font-size: 14px;

      >.el-row {
        margin-bottom: 13px;
      }

      .el-form-item {
        float: left;
        margin-right: 40px;

        .el-form-item__label {
          color: #8b9bb9;
        }
      }

      .el-input {
        width: 150px;
      }
    }
  }

  .pageFooter {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #edecf6;
    width: 100%;
    text-align: center;
    float: left;
  }
}
</style>
